<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            width: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color:#DDDDDD ;
        }
        .container {
            height: 100vh;
            width: 80%;
            flex-direction: column;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 1);
        }
        .vjs-default-skin{
            height: 80%;
            width: 80%;
        }
        .title{
            height: 10%;
            width: 80%;




        }
        .title h1{
            font-size: 30px;
            text-align: left; /* 使 h1 标题居左对齐 */
            margin-bottom: 20px

        }

    </style>
    <title>RTMP 视频播放</title>
    <!-- 引入 Video.js 的 CSS 和 JS 文件 -->
    <link href="https://vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
    <!-- 引入 RTMP 插件 -->
    <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2.0.0/dist/videojs-flash.min.js"></script>
</head>
<body>
<div class="container">
    <div class="title">

        <h1>RTMP 视频播放</h1>


    </div>
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
        <source src="rtmp://example.com:1935/live/stream1" type="rtmp/flv">
        <p class="vjs-no-js">为了观看视频，请启用 JavaScript 并考虑升级到支持 HTML5 视频的浏览器。</p>
    </video>
</div>
</tr>

<script>        // 初始化 Video.js 播放器
var player = videojs('my-video', {
    techOrder: ['flash'],
    sources: [{
        src: 'rtmp://example.com:1935/live/stream1',
        type: 'rtmp/flv'
    }]
});

// 可以在这里添加其他配置或事件监听
player.on('play', function() {
    console.log('视频开始播放');
});

player.on('pause', function() {
    console.log('视频暂停');
});
</script>
</body>
</html>